<template>
  <div>
    <el-menu
      :class="Idx ? 'el-menu--collapse' : 'el-menu-vertical-demo'"
      :collapse="isCollapse"
      :collapse-transition="false"
      :default-active="activeIndex"
      active-text-color="#ffffff"
      background-color="#545c64"
      text-color="#fff"
      @select="handleSelect"
    >
      <el-menu-item
        v-for="(item, idx) in list"
        :key="idx"
        :index="idx.toString()"
        @click="routerClick(item)"
      >
        <i :class="item.meta.icon"></i>
        <span slot="title">{{ item.meta.title }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  props: {
    Eins: {
      type: Boolean,
      default: null,
    },
  },
  watch: {
    Eins(e) {
      this.Idx = e;
      if (this.Idx) {
        this.isCollapse = true;
      } else {
        this.isCollapse = false;
      }
    },
  },
  data() {
    return {
      list: [],
      isCollapse: false,
      Idx: null,
      activeIndex: "0",
    };
  },
  mounted() {
    const routes = this.$router.getRoutes(); // 获取所有路由
    let arr = routes.filter((item) => {
      return item.meta.requiresAuth;
    });
    this.list = arr;
    let nameIdx = sessionStorage.getItem("myIndex");
    if (nameIdx) {
      this.activeIndex = nameIdx;
    }
  },
  methods: {
    routerClick(e) {
      this.$router.push(e.path).catch((err) => {
        // console.log(err);
      });
    },
    handleSelect(index) {
      // 用户选择菜单项时触发
      this.activeIndex = index; // 更新当前激活的菜单项
      sessionStorage.setItem("myIndex", this.activeIndex);
    },
  },
};
</script>
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100vh;
}

::v-deep .el-menu--collapse {
  width: 65px;
  height: 100vh;
}

::v-deep .el-menu-item.is-active {
  background-color: #2c8cf0 !important; /* 你想要的颜色 */
}
</style>
